<template>
  <div class="wrapper">
    <div>
      <div class="flex">

        <!-- 新建动作 -->
        <el-button type="primary" size="mini" @click="handleCreateAction">新建动作</el-button>
        <!-- 输出JSON -->
        <el-button type="primary" size="mini" @click="handleExport">导出JSON</el-button>
        <import-json :store="2" @handleImport="handleImport"></import-json>
        <!-- <el-upload class="upload-demo" action="" :on-remove="handleRemove" :limit="1" :file-list="fileList">
          <el-button type="primary" style="margin-left: 20px;" size="mini">导入JSON</el-button>
        </el-upload> -->
      </div>

      <el-table :data="tableData" border align="left" height="450">
        <!-- <el-table-column label="动作ID" width="160">
          <template slot-scope="scope">
            <el-select v-model="scope.row.STrackID" size="mini" placeholder="请选择">
              <el-option v-for="item in enShearerRunnerCode" :key="item.key" :label="item.name" :value="item.key">
              </el-option>
            </el-select>
          </template>
        </el-table-column> -->
        <el-table-column label="动作名称" width="160">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" size="mini" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="关联组合动作ID" width="160">
          <template slot-scope="scope">
            <el-select v-model="scope.row.ActID" size="mini" placeholder="请选择">
              <el-option v-for="item in enAutoActCode" :key="item.key" :label="item.name" :value="item.key"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="调度区域" width="160">
          <template slot-scope="scope">
            <el-select v-model="scope.row.RegionType" size="mini" placeholder="请选择">
              <el-option v-for="item in enSTrackActRegion" :key="item.key" :label="item.name" :value="item.key">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="调度顺序" width="160">
          <template slot-scope="scope">
            <el-select v-model="scope.row.OrderType" size="mini" placeholder="请选择">
              <el-option v-for="item in enSTrackActOrder" :key="item.key" :label="item.name" :value="item.key">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="前置动作ID" width="160">
          <template slot-scope="scope">
            <el-select v-model="scope.row.PreRunnerID" size="mini" placeholder="请选择">
              <el-option v-for="item in enShearerRunnerCode" :key="item.STrackID" :label="item.name"
                :value="item.STrackID" :disabled="scope.row.STrackID==item.STrackID">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="触发模式" width="160">
          <template slot-scope="scope">
            <el-select v-model="scope.row.TriggerMode" size="mini" placeholder="请选择">
              <el-option v-for="item in enShearerActTriggerMode" :key="item.key" :label="item.name" :value="item.key">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="触发煤机位置" width="160">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ShearerLoc" size="mini" :controls="false" :min="0" :max="65535"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="触发煤机方向" width="160">
          <template slot-scope="scope">
            <el-select v-model="scope.row.ShearerDir" size="mini"
              v-if="scope.row.ShearerLoc != 0 && scope.row.ShearerLoc" placeholder="请选择">
              <el-option v-for="item in enSTrackRunDir" :key="item.key" :label="item.name" :value="item.key">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="有效区域L" width="160">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ActRegionL" size="mini" :controls="false" :min="0" :max="65535"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="有效区域H" width="160">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ActRegionH" size="mini" :controls="false" :min="0" :max="65535"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="参数组" width="160">
          <template slot-scope="scope">
            <!-- <el-select size="mini" v-model="scope.row.ParaIDs" multiple placeholder="请选择">
              <el-option v-for="item in enParaID" :key="item.key" :label="item.name" :value="item.key"></el-option>
            </el-select> -->
            <el-select filterable allow-create default-first-option size="mini" v-model="scope.row.ParaIDs" multiple
              placeholder="请选择">
              <el-option v-for="item in parasIDsCode" :key="item.value" :label=" item.value +' '+item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.groupName }}</span>
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="支持架型" width="160">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.shieldTypeOpt" multiple placeholder="请选择">
              <el-option v-for="item in enShieldType" :key="item.key" :label="item.name" :value="item.key"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleUpdata(scope.row)">更新</el-button>
            <el-button type="text" size="small" v-if="!scope.row.isUsed" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加动作或修改动作弹窗 -->
    <el-dialog :title="dialogTitle ? '添加新动作' : '更改工具项'" :visible.sync="dialogVisible" width="70%">
      <el-form label-position="right" ref="form" inline :model="form" inline="" label-width="120px">
        <!-- <el-form-item label="动作ID" :rules="[{ required: true, message: '请选择', trigger: 'blur' },]">
          <el-select v-model="form.STrackID" placeholder="请选择">
            <el-option v-for="item in enSTrackControl" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="动作名称" :rules="[{ required: true, message: '请输入', trigger: 'blur' },]">
          <el-input v-model="form.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="关联组合动作ID" :rules="[{ required: true, message: '请选择', trigger: 'blur' },]">
          <el-select v-model="form.ActID" placeholder="请选择">
            <el-option v-for="item in enAutoActCode" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调度区域" :rules="[{ required: true, message: '请选择', trigger: 'blur' },]">
          <el-select v-model="form.RegionType" placeholder="请选择">
            <el-option v-for="item in enSTrackActRegion" :key="item.STrackID" :label="item.name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调度顺序" :rules="[{ required: true, message: '请选择', trigger: 'blur' },]">
          <el-select v-model="form.OrderType" placeholder="请选择">
            <el-option v-for="item in enSTrackActOrder" :key="item.key" :label="item.name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="前置动作ID" :rules="[{ required: true, message: '请选择', trigger: 'blur' },]">
          <el-select v-model="form.PreRunnerID" placeholder="请选择">
            <el-option v-for="item in tableData" :key="item.STrackID" :label="item.name" :value="item.STrackID"
              :disabled="item.STrackID==form.STrackID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="触发模式" :rules="[{ required: true, message: '请选择', trigger: 'blur' },]">
          <el-select v-model="form.TriggerMode" placeholder="请选择">
            <el-option v-for="item in enShearerActTriggerMode" :key="item.key" :label="item.name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="触发煤机位置" :rules="[{ required: true, message: '请输入', trigger: 'blur' },]">
          <el-input v-model="form.ShearerLoc" :controls="false" :min="0" :max="65535"></el-input>
        </el-form-item>
        <el-form-item label="触发煤机方向" v-if="form.ShearerLoc&&form.ShearerLoc!=0">
          <el-select v-model="form.ShearerDir" placeholder="请选择">
            <el-option v-for="item in enSTrackRunDir" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效区域L" :rules="[{ required: true, message: '请输入', trigger: 'blur' },]">
          <el-input v-model="form.ActRegionL" :controls="false" :min="0" :max="65535"></el-input>
        </el-form-item>
        <el-form-item label="有效区域H" :rules="[{ required: true, message: '请输入', trigger: 'blur' },]">
          <el-input v-model="form.ActRegionH" :controls="false" :min="0" :max="65535"></el-input>
        </el-form-item>
        <el-form-item label="参数组" :rules="[{ required: true, message: '请选择', trigger: 'blur' },]">
          <el-select filterable allow-create default-first-option size="mini" v-model="form.ParaIDs" multiple
            placeholder="请选择" :rules="[{ required: true, message: '请选择', trigger: 'blur' },]">
            <el-option v-for="item in parasIDsCode" :key="item.value" :label=" item.value +' '+item.label"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.groupName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支持架型">
          <el-select v-model="form.shieldTypeOpt" placeholder="请选择">
            <el-option v-for="item in enShieldType" :key="item.key" :label="item.name" :value="item.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- 提交更新 -->
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  // 引用initDB
  import InDB from "./utils/initDB.js"
  // 引用 sortablejs
  import Sortable from 'sortablejs'
  // 引用 exportJson
  import exportJson from "./utils/exportJson.js"
  // 引用enAutoActCode
  import enAutoActCode from './data/enAutoActCode'
  // 引用enSTrackActRegion
  import enSTrackActRegion from './data/enSTrackActRegion'
  // 引用 enSTrackActOrder
  import enSTrackActOrder from './data/enSTrackActOrder'
  // enShearerActTriggerMode
  import enShearerActTriggerMode from './data/enShearerActTriggerMode'
  // 引用enParaID
  import enParaID from './data/enParaID'
  //引用enShieldType
  import enShieldType from './data/enShieldType'
  // 引用 enSTrackControl
  import enSTrackControl from './data/enSTrackControl'
  // 引用enSTrackStage
  import enSTrackStage from './data/enSTrackStage'
  // 引用 enSTrackRunDir
  import enSTrackRunDir from './data/enSTrackRunDir'

  import importJson from "./components/importJson.vue"

  import parasIDsCode from "./data/paraDataCode.js"
  export default {
    components: {
      importJson
    },
    data() {
      return {
        parasIDsCode: parasIDsCode,
        // 声明enSTrackRunDir
        enSTrackRunDir: enSTrackRunDir,
        // 声明 enShearerRunnerCode
        enShearerRunnerCode: [],
        // 声明 enAutoActCode
        enAutoActCode: enAutoActCode,
        // 声明 enSTrackActRegion
        enSTrackActRegion: enSTrackActRegion,
        // 声明 enSTrackActOrder
        enSTrackActOrder: enSTrackActOrder,
        // 声明 enShearerActTriggerMode
        enShearerActTriggerMode: enShearerActTriggerMode,
        // 声明 enParaID
        enParaID: enParaID,
        // 声明 enShieldType
        enShieldType: enShieldType,
        // 声明 enSTrackControl
        enSTrackControl: enSTrackControl,
        // 声明 enSTrackStage
        enSTrackStage: enSTrackStage,
        // 声明 dialogVisible,用于控制弹窗
        dialogVisible: false,
        // 声明 dialogTitle,用于控制弹窗标题
        dialogTitle: false,
        // 声明 form,用于承载弹窗表单
        form: {},
        // 声明 tableData,用于展示表格数据
        tableData: [],
        fileList: null
      }
    },

    methods: {
      handleImport(res) {
        this.tableData = res
      },
      // 导出json
      handleExport() {
        // 实例化InDB并使用名为actionsPool的store,
        // 并使用这个store的all()静态方法,获取动作池所有数据
        // 返回一个Promise,
        // 然这个promise的then方法使用exportJson生成名为动作池的Json文件
        InDB.actionsPool.all().then(res => {
          let arr = res.map(item => {
            let obj = {
              ...item,
              Name: item.name,
              ShearerLoc: item.ShearerLoc * 1,
              ActRegionL: item.ActRegionL * 1,
              ActRegionH: item.ActRegionH * 1,
              _SDLength: item._SDLength ? item._SDLength * 1 : 0,
              _SDScope: item._SDScope ? item._SDScope * 1 : 0,
            }
            return obj
          })
          exportJson(arr, '动作池')
        })
      },
      async handleUpdata(r) {
        let result = await InDB.actionsPool.put({
          ...r
        }).then(() => {
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success'
          });
        })
      },
      handleCreateAction() {
        this.form = {}
        this.dialogTitle = true
        this.dialogVisible = true
      },
      handleClickPrint() {},
      async onSubmit() {
        if (!this.form.hasOwnProperty('id')) {
          let all = await InDB.actionsPool.all()
          if (all.length) {
            console.log(this.form.name);
            let checkoutName = all.some(item => {
              return this.form.name == item.name
            })
            if (checkoutName) {
              return this.$notify.error({
                title: '错误',
                message: '名字重复'
              });
            }
          }
        }
        let result = await InDB.actionsPool.put({
          ...this.form
        })
        this.tableData = await InDB.actionsPool.all()
        this.dialogVisible = false
      },
      async handleDelete(r, k) {
        this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(async () => {
            let result = await InDB.actionsPool.delete(r.id)
            this.tableData = await InDB.actionsPool.all()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
    },
    created() {

      InDB.actionsPool.all().then(res => {
        // this.enShearerRunnerCode = res
        this.tableData = res.map(item => {
          item.isUsed = fa
          return item
        })
        // console.log(this.tableData);
      })
      // this.fetchEnShearerRunnerCode()
      // this.fetchTableData()
    },
    mounted() {
      // this.fetchTableData()
    }
  }
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .flex_center {
    align-items: center;
  }

  .ju_sb {
    justify-content: space-between;
  }

  .wrapper {
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* width: 100%; */
  }

  .card_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px solid #f6f6f6;
  }

  .card_item+.card_item {
    margin-top: 8px;
  }
</style>
